<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<title></title>
<%@ include file="/WEB-INF/component/commonCSS.jsp"%>
<!--[if lt IE 9]>
        <script src="lib/js/html5shiv.min.js"></script>
        <script src="lib/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue sidebar-mini fixed skin-blue-light-frame">
	<section class="content-header">
		<h1><spring:message code="message.lable.DICdiQuChaKan"/></h1>
		<ol class="breadcrumb">
			<li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i><spring:message code="message.lable.first"/></a></li>
			<li class="active"><a href="#"><spring:message code="message.lable.DicManage"/></a></li>
			<li class="active"><a href="#"><spring:message code="message.lable.areaDic"/></a></li>
		</ol>
	</section>
	<section class="content">
		<div class=" box box-success">
			<div class="box-body">
				<div class="input">

					<div class="textalign1"><spring:message code="message.listForm.diQuMingCheng"/>：</div>
                    <div class="boxinput">
                       <table style="width:100%;">
                           <tr>
                              <td style="width:33%">
                                <select class="textinput" id="areaFather"  name="areaFather">
                            <option>${sysProvinceName }</option>
                        </select>
                              </td>
                              <td style="width:33%">
                                <select class="textinput" id="areaSon" name="areaSon" ></select>
                                </td>
                           </tr>
                        </table>
                    </div>

                    <div class="textalign1"><spring:message code="message.listForm.diQuBianMa"/>：</div>
                    <div class="boxinput">
                        <input type="text" class="textinput" id="serchareacode" placeholder="<spring:message code="message.listForm.diQuBianMa"/>" />
                    </div>

                    <div class="textalign1"><spring:message code="message.lable.status"/>：</div>
                    <div class="boxinput">
                        <select id="status" class="textinput">
                            <option value="" ><spring:message code="message.select.option"/></option>
                            <option value="1" ><spring:message code="message.button.start"/></option>
                            <option value="0" ><spring:message code="message.button.stop"/></option>
                            </select>
                    </div>
                   <div class="textalign" >
					<button id="selectArea" type="button" class="btn btn-success btn-sm" onclick="gridSerch()"><spring:message code="message.button.seach"/></button>
				</div>
				</div>
			</div>
		</div>
		<table class="jqgrid" id="gridlist"></table>
		<div id="gridpage"></div>
		<div class=" box box-warning bottongroup">
			<label id="addNew" class="btn btn-default btn-sm"><spring:message code="message.button.addSpacing"/></label>
			<label id="batchUpdate" onclick="batchoper('1')" class="btn btn-default btn-sm"><spring:message code="message.button.startSpacing"/></label>
			<label id="batchUpdate" onclick="batchoper('0')" class="btn btn-default btn-sm"><spring:message code="message.button.stopSpacing"/></label>

		</div>
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h5 class="modal-title" id="exampleModalLabel"><spring:message code="message.lable.DICdiQuXinZeng"/></h5>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group form-group-xs" id="areaIdHide">
								<input type="hidden" name="operflag" id="operflag" value="" />
								<input type="hidden" name="eidtArea" id="eidtArea" value="" />
								<label for="recipient-name" class=" control-label"><spring:message code="message.listForm.diQuBianMa"/>：</label>
								<div class="">
									<input type="text" class="form-control" id="txtAreaID" placeholder="<spring:message code="message.listForm.diQuBianMa"/>" maxlength="20">
								</div>
							</div>
							<div class="form-group form-group-xs">
								<label for="recipient-name" class=" control-label"><spring:message code="message.listForm.diQuMingCheng"/>：</label>
								<div class="">
									<input type="text" class="form-control" id="txtAreaName" placeholder="<spring:message code="message.listForm.diQuMingCheng"/>" maxlength="128">
								</div>
							</div>
							<div class="form-group form-group-xs" id="fatherArea">
								<label for="recipient-name" class=" control-label"><spring:message code="message.listForm.fuJiDiQu"/>：</label>
								<div class="">
									<div class="col-sm-6">
										<select id="area1" class="form-control">
										</select>
									</div>
									<div class="col-sm-6">
										<select id="area2" class="form-control">
										</select>
									</div>
								</div>
							</div>
							<div class="form-group form-group-xs">
								<label for="recipient-name" class="control-label"><spring:message code="message.listForm.diQuJianCheng"/>：</label>
								<div class="">
									<input type="text" class="form-control" id="areaShortName" placeholder="<spring:message code="message.listForm.diQuJianCheng"/>" maxlength="500" >
								</div>
							</div>
							<div class="form-group form-group-xs">
								<label for="recipient-name" class="control-label"><spring:message code="message.listForm.diQuWanZhengMingCheng"/>：</label>
								<div class="">
									<input type="text" class="form-control" id="areaFullName" placeholder="<spring:message code="message.listForm.diQuWanZhengMingCheng"/>" maxlength="512" >
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" onclick="save();" class="btn btn-primary btn-sm"><spring:message code="message.button.save"/></button>
						<button type="button" id="closebt" class="btn btn-danger btn-sm" data-dismiss="modal"><spring:message code="message.button.close"/></button>
					</div>
				</div>
			</div>
		</div>
	</section>
	<%@ include file="/WEB-INF/component/commonJS.jsp"%>
	<script type="text/javascript">

		//绑定回车
	    $('#serchareacode,#areaFather,#areaSon,#status').bind('keydown', function(event) {
	        if (event.keyCode == "13") {        //13 位电脑上回车键的位置代码
	            $('#selectArea').click();
	        }
	    });

    	$("#areaFather").focus();//加载页面光标在地区上

        $(function () {
            $('#addNew').click(function () {
            	$('.modal-title').html('<spring:message code="message.lable.DICdiQuXinZeng"/>');
            	$("#areaIdHide").attr("hidden",false);
            	$("#fatherArea").attr("hidden",false);
            	$("#operflag").val("add");
            	$('#txtAreaID').val("");
            	$('#txtAreaName').val("");
            	$('#areaShortName').val("");
            	$('#areaFullName').val("");
            	$("#area1").HNSelect({
                    url: "${pageContext.request.contextPath}/selectController/getArea.html", data: { ID: '000000' }, defaultText: "<option value=''><spring:message code="message.select.option"/></option>",
                    func: function () {
                        $("#area2").HNSelect({
                            parent_selector: "#area1", url: "${pageContext.request.contextPath}/selectController/getArea.html", dataid: "ID", defaultText: "<option value=''><spring:message code="message.select.option"/></option>",
                        });
                    }
                });
                $('#exampleModal').modal({
                    keyboard: true
                });
            });

            $("#gridlist").jqGrid({
                url: "${pageContext.request.contextPath}/dicArea/getDataList.html",
                mtype: "POST",
                contentType : 'application/json',
                datatype: "json",
                autowidth: true,
                height: 270,
                colNames: ['<spring:message code="message.jqGrid.cz"/>',
                           '<spring:message code="message.listForm.diQuBianMa"/>',
                           '<spring:message code="message.listForm.diQuMingCheng"/>',
                           '<spring:message code="message.listForm.diQuJianCheng"/>',
                           '<spring:message code="message.listForm.diQuWanZhengMingCheng"/>',
                           '<spring:message code="message.listForm.shangJiDiQuBianMa"/>',
                           '<spring:message code="message.listForm.shangJiDiQuMingCheng"/>',
                           '<spring:message code="message.lable.status"/>'
                           ],
                colModel: [
                    { name: 'operate', width: 40, align: 'center',sortable: false,
                        formatter:function(val, opts, rowdata){
                            var str = "";
                            str += "<a href=\"javascript:edit('"+rowdata.areaId+"');\"  style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat 0px 0px' class='opIcon' title='<spring:message code="message.jqGrid.cz.bianJi"/>'></a>";
                            str += "<a href='${pageContext.request.contextPath}/dicAreaLog/toLogList.html?areaid="+rowdata.areaId+"&areaName="+rowdata.areaName+"' style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat -120px 0px' class='opIcon' title='<spring:message code="message.jqGrid.cz.weiHuJiLu"/>'></a>";
                            return str;
                            }
                    },
                    { name: 'areaId',key:true, width: 40, align: 'center' ,sortable: false},
                    { name: 'areaName', width: 60 , align: 'center',sortable: false},
                    { name: 'arShortname', width: 40, align: 'center',sortable: false },
                    { name: 'arFullname', width: 80, align: 'center',sortable: false },
                    { name: 'fatherAreaCode', width: 40 , align: 'center',sortable: false},
                    { name: 'fatherAreaName', width: 60 , align: 'center',sortable: false},
                    { name: 'status', width: 20 , align: 'center',sortable: false,
                    	formatter:function(val, opts, rowdata){
                    	if (val == 1){
                    		return "<spring:message code="message.button.start"/>";
                    	} else if (val == 0){
                    		return "<span class='red'><spring:message code="message.button.stop"/></span>";
                    	}
                    }}
                ],
                rowNum: 20,
                rowList: [10, 20, 50, 100],
                rownumbers: true,
                pager: "#gridpage",
                viewrecords: true,
                multiselect: true,
                caption: "<spring:message code="message.list.areaDiclist"/>",

                //序号宽度自动变化
                gridComplete:function(){
                	//序号列宽度自适应（参数为jqgridID）
                    autoRNWidth("gridlist");
                	//数据只有一条时默认选中（参数为jqgridID）
                    selectByOneData("gridlist");
                },

                jsonReader: {
                    repeatitems: false,
                    id: "ids"
                }
            });
            $("#gridlist").jqGrid('navGrid', '#gridpage', { add: false, edit: false, del: false, search: false, refresh: false });
            $(window).trigger("resize");
        });

        //查询
        function gridSerch(pg) {
            var arecode = $("#serchareacode").val();

            var fatherAreaCode = "";
            if( "" != $("#areaFather").val() ){
            	fatherAreaCode = $("#areaFather").val();
            }
            if( "" != $("#areaSon").val()){
            	fatherAreaCode = $("#areaSon").val();
            }
            var status = $("#status").val();

            $("#gridlist").jqGrid('setGridParam',{
                datatype:'json',
                postData:{"serchareacode":arecode,
                        "fatherAreaCode":fatherAreaCode,
                        "status":status
                        },
                        page : pg
            }).trigger("reloadGrid"); //重新载入
        }

        //地区名称联动
        $("#areaFather").HNSelect({
            url: "${pageContext.request.contextPath}/selectController/getArea.html", data: { ID: '000000' },
            defaultText: "<option value=''><spring:message code="message.select.option"/></option>",
            func: function () {
                $("#areaSon").HNSelect({
                    parent_selector: "#areaFather", url: "${pageContext.request.contextPath}/selectController/getArea.html", dataid: "ID",
                    defaultText: "<option value=''><spring:message code="message.select.option"/></option>",
                });
            }
        });


        //启用停用
        function batchoper(flag){
        	var status = "<spring:message code="message.button.start"/>";
        	if (flag == 0){
        		status = "<spring:message code="message.button.stop"/>";
        	}
        	//获取选中的ID及对应的名字（参数：jqgridId,名字列名，状态列名，当前操作即列表中显示的值），返回infos[0]是ID串，infos[1]是名字串
        	var infos = batchSwitchStatus("gridlist", "areaName", "status", status,'<spring:message code="message.listForm.diQu"/>');
        	if (infos.length < 1){
        		return;
        	}

      	    $.HN.message.confirm('<spring:message code="message.lable.OKYES"/>'+status+'<spring:message code="message.lable.yiXia"/><spring:message code="message.listForm.diQu"/><spring:message code="message.lable.ma"/><br/>'+infos[1], '', '').on(function (e) {
                if (e) {
                	$.ajax({
                        url: "${pageContext.request.contextPath}/dicArea/batchSwitchStatus.html",//action地址
                        data: { state:flag,param:infos[0] },//传值
                        type: "post",//执行方式get or post 默认以post方式执行
                        dataType:"json",
                        success: function (result) {//执行成功后 提示
                            if (result.success){
                               $.alert('<spring:message code="message.HN.alert.chengGong"/>' + status + result.operCount + '<spring:message code="message.listForm.ge"/>' + '<spring:message code="message.listForm.diQu"/>', "success");
                        	   gridSerch($("#gridlist").jqGrid('getGridParam','page'));
                           } else {
                        	   $.alert("<spring:message code="message.HN.alert.fail"/>", "error");
                           }
                        }
                    });
                }
            });
        }

        function save(){
        	if (!validate()) {
                return;
            }
      	  $.HN.message.confirm('<spring:message code="message.HN.alert.OkSaveYESorNO"/>', '', '').on(function (e) {
                if (e) {

                	var operflag = $.trim($("#operflag").val());

                	var areaid = $('#txtAreaID').val();
                	var areaname = $('#txtAreaName').val();
                	var fatherid = $('#area2').val();
                	if (fatherid == null || fatherid.length < 1){
                		fatherid = $('#area1').val();
                	}
                	var shortname = $('#areaShortName').val();
                	var fullname = $('#areaFullName').val();

                	$.ajax({
                        url: "${pageContext.request.contextPath}/dicArea/addDicArea.html",//action地址
                        data: {
                        	areaId: areaid,
                        	areaName:areaname,
                        	fatherId:fatherid,
                        	arShortName:shortname,
                        	arFullName:fullname,
                        	operflag:operflag,
                        	editArea:$("#eidtArea").val()
                        },//传值
                        type: "post",//执行方式get or post 默认以post方式执行
                        success: function (data) {//执行成功后 提示
                        	var data  = eval("("+data+")");
                           if (data.success){
                        	   $.alert("<spring:message code="message.HN.alert.success"/>", "success");
                        	   var page = $("#gridlist").jqGrid('getGridParam','page');
                        	   gridSerch(page);
                        	   $("#closebt").click();
                        	   return;
                           } else {
                        	   $.alert(data.msg, "warn");
                        	   return;
                           }
                        },
                        error: function () {// 如果执行出现错误 提示
                        	$.HN.message.alert('<spring:message code="message.HN.alert.fail"/>', '<spring:message code="message.HN.alert.type"/>', 'error');
                        }
                    });
                }
            });
        }

        function edit(areaid){
	           $("#areaIdHide").attr("hidden",true);
	           $("#fatherArea").attr("hidden",true);
	           $("#operflag").val("edit");
	           $("#eidtArea").val(areaid);
		       $('.modal-title').html('<spring:message code="message.lable.DICdiQuBianJi"/>');
		       $.ajax({
		           url: "${pageContext.request.contextPath}/dicArea/getData.html",
		           data: { areaid: areaid },
		           type: "post",
		           datatype: "json",
		           success: function (data) {//执行成功后 提示
		              var data  = eval("(" + data + ")");
		               $('#txtAreaID').val(data.areaId);
		               $('#txtAreaName').val(data.areaName);
		               $('#areaShortName').val(data.arShortname);
		               $('#areaFullName').val(data.arFullname);
		               $('#exampleModal').modal({
		                   keyboard: true
		               });
		           },
		           error: function () {// 如果执行出现错误 提示
		        	   $.alert("<spring:message code="message.HN.alert.fail"/>", "error");
		           }
            });
        }

        function validate() {
        	var areaid = $.trim($('#txtAreaID').val());
            if (areaid == null || areaid == ""){
                 $("#txtAreaID").trigger("focus");
                 $.alert("<spring:message code="message.listForm.diQuBianMa"/><spring:message code="message.yanZheng.buNengWeiKong"/>", "warn");
                return false;
            } else if(!/^[a-zA-Z0-9_]+$/.test(areaid)){
                 $("#txtAreaID").trigger("focus");
                 $.alert("<spring:message code="message.listForm.diQuBianMa"/><spring:message code="message.yanZheng.zhiNengYouZiMuShuZiZuCheng"/>", "warn");
                return false;
            }else if(areaid.length>128){
                 $("#txtAreaID").trigger("focus");
                 $.alert("<spring:message code="message.listForm.diQuBianMa"/><spring:message code="message.info.zuiDaChangDu"/>128", "warn");
                return false;
            }

            var areaname = $.trim($('#txtAreaName').val());
            if (areaname == null || areaname == ""){
                $("#txtAreaName").trigger("focus");
                $.alert("<spring:message code="message.listForm.diQuMingCheng"/><spring:message code="message.yanZheng.buNengWeiKong"/>", "warn");
                return false;
            } else if(areaname.length>128){
               $("#txtAreaName").trigger("focus");
               $.alert("<spring:message code="message.listForm.diQuMingCheng"/><spring:message code="message.info.zuiDaChangDu"/>128", "warn");
                return false;
            }

            var fatherid = $.trim($("#area2").val());
            if (fatherid == "" || fatherid == null){
                fatherid = $("#area1").val();
            }
            if (fatherid == "" || fatherid == null){
                fatherid = "000000";
            }

            var shortname = $.trim($('#areaShortName').val());
            if (shortname == "" || shortname == null){
               $("#areaShortName").trigger("focus");
               $.alert("<spring:message code="message.listForm.diQuJianCheng"/><spring:message code="message.yanZheng.buNengWeiKong"/>", "warn");
                return false;
            } else if(shortname.length>500){
               $("#areaShortName").trigger("focus");
               $.alert("<spring:message code="message.listForm.diQuJianCheng"/><spring:message code="message.info.zuiDaChangDu"/>500", "warn");
                return false;
            }

            var fullname = $.trim($('#areaFullName').val());
            if (fullname == "" || fullname == null){
               $("#areaFullName").trigger("focus");
               $.alert("<spring:message code="message.listForm.diQuWanZhengMingCheng"/><spring:message code="message.yanZheng.buNengWeiKong"/>", "warn");
                return false;
            } else if(fullname.length>512){
               $("#areaFullName").trigger("focus");
               $.alert("<spring:message code="message.listForm.diQuWanZhengMingCheng"/><spring:message code="message.info.zuiDaChangDu"/>512", "warn");
                return false;
            }

            return true;
        }

    </script>
</body>
</html>
